<template>
  <su-popup
    :show="props.show"
    position="bottom"
    round="20"
    :overlay="true"
    @close="close_moreOption_popup"
    class="back-box"
  >
    <view class="more-popup">
      <view class="share-popup__content ss-flex justify-around">
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            class="share-button"
            @click="stickyCli"
          >
            <div class="img-box">
              <image
                class="share-icon moments-icon"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/e61b42924b96e6ce246e9114e9f6a1aa.png"
                mode=""
              />
            </div>
            <view class="share-text">{{props.item.pinned == 0 ? '置顶' : '取消置顶' }}</view>
          </button>
        </view>
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            class="share-button"
            @click="shearShow('more')"
          >
            <div class="img-box">
              <image
                class="share-icon qrcode-icon"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/4f276546686e01e246c9c1674f683822.png"
                mode=""
              />
            </div>
            <view class="share-text">分享</view>
          </button>
        </view>
        <view class="share-item ss-flex-col justify-center align-center">
          <button
            class="share-button"
            @click="removeCli"
          >
            <div class="img-box">
              <image
                class="share-icon moments-icon"
                src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250326/b65924d2ec5bf779a713cd9add26006a.png"
                mode=""
              />
            </div>
            <view class="share-text">删除</view>
          </button>
        </view>
      </view>

      <view
        class="share-popup__cancel ss-m-t-20"
        @click="close_moreOption_popup"
      >取消</view>
    </view>
  </su-popup>
  <!-- 删除确认 -->
  <su-popup
    :show="state.clim_popup"
    position="bottom"
    round="20"
    :overlay="true"
    @close="close_remove_popup"
  >
    <view
      class="title-box"
      @click="removeClim"
    >
      <view class="title-header">删除作品</view>
      <view class="title-mess">作品将永久删除并且无法找回</view>
    </view>
    <view
      class="share-popup__cancel ss-m-t-20"
      @click="close_remove_popup"
    >取消</view>
  </su-popup>
</template>

<script setup>
import sheep from '@/sheep';
import { reactive } from 'vue';
import API from '@/association/api';
import association from '@/association/store';
const emit = defineEmits(['close', 'shear_show', 'removeClim']);
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  show: {
    type: Boolean,
    default: false,
  }
});
const state = reactive({
  show_popup: false,
  clim_popup: false
});

const removeClim = () => {
  const { find_id, pinned } = props.item;
  const params = {
    find_id,
  };
  API.removeContent(params).then((res) => {
    uni.showToast({
      icon: 'none',
      title: res.msg,
    });
    const { code } = res;
    if (code) {
      close_moreOption_popup();
      close_remove_popup();
      association().optionShow = true
      emit('removeClim', props.item);
    }
  });
}
const close_moreOption_popup = () => {
  emit('close')
}
const close_remove_popup = () => {
  state.clim_popup = false;
}
const removeCli = () => {
  state.clim_popup = true;
}
const stickyCli = () => {
  const { find_id, pinned } = props.item;
  const param = {
    type: pinned == 0 ? 'pinned' : 'cancel',
    find_id,
  };
  API.stickyApi(param).then((res) => {
    const { code } = res;
    uni.showToast({
      icon: 'none',
      title: res.msg,
    });
    if (code) {
      if (pinned == 0) {
        props.item.pinned = 1;
      } else {
        props.item.pinned = 0;
      }
    }
  });

}
const shearShow = (type) => {
  // state.moreOption.show_popup = false;
  emit('shear_show', type);
}
</script>

<style lang="scss" scoped>
.share-popup__cancel {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  border-top: 1rpx solid #eee;
}
.title-box {
  padding: 20rpx 0 5rpx 0;
  display: flex;
  justify-content: center;
  .title-header {
    font-size: 28rpx;
    color: #3d3d3d;
    text-align: center;
  }
  .title-mess {
    font-size: 24rpx;
    color: #87868a;
    margin-top: 10rpx;
    text-align: center;
  }
  // 取消按钮
  .cancel-btn {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    margin-top: 20rpx;
    border-top: 1rpx solid #eeeeee;
    background: #fff;
  }
}
.more-popup {
  padding: 30rpx;
  background-color: #ffff;

  .share-popup__content {
    display: flex;
    flex-direction: row;
  }

  &__title {
    font-size: 32rpx;
    text-align: center;
    color: #333;
    margin-bottom: 40rpx;
  }

  &__content {
    padding: 20rpx 0;
  }

  &__cancel {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333;
    border-top: 1rpx solid #eee;
  }

  .share-item {
    padding: 10rpx;
    .share-button {
      background: transparent;
      border: none;
      padding: 0;
      margin: 0;
      line-height: normal;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .img-box {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: #f2f3f6;
      }

      &::after {
        border: none;
      }
    }

    .share-icon {
      width: 70rpx;
      height: 70rpx;
    }
    .share-popup__cancel {
      background-color: #f2f3f6;
    }

    .share-text {
      font-size: 28rpx;
      color: #3d3d3d;
      margin-top: 10rpx;
    }
  }
}
</style>